{{#s3_key}}

    <style>
        /* HEY CHRIS THIS IS FPOEY */

        /* show upload progress with bars */
        .progress-bar-area {
            margin-top: 20px;
            border-radius: 0px !important; }

        .progress {
            display: none;
            position: relative;
            width: 100%;
            height: 35px;
            background: #ddd;
            overflow: hidden;
            margin-top: 10px;
            border-radius: 3px !important; }

        .bar {
            border-radius: 3px;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 35px;
            line-height: 35px;

            background: darkred;
            text-align: center;
            color: white;
            font-weight: bold;
            font: 400 14px/20px 'Montserrat',Helvetica,Arial,sans-serif;
            border-radius: 0px !important; }

        .bar.red {
            border-radius: 3px;
            background: #fa3838; }

    </style>

    <form accept-charset="UTF-8" id="file_upload" method="post" class="direct-upload novalidate" action="{{upload_url}}" enctype="multipart/form-data">
        {{{inputs}}}
        <div class="progress-bar-area"></div>
        <input type="file" name="file" />
    </form>

    <script src="{{www_path}}/ui/default/assets/scripts/jquery.fileupload.js"></script>
    <script type="text/javascript">
        $(function() {
            var filename, file, filekey, connectionId, finalizeUrl;
            filekey = '{{key}}';
            connectionId = '{{connection_id}}';
            finalizeUrl = '{{www_path}}/ajax/finalizeupload';

            var form = $('.direct-upload');
            var filesUploaded = [];

            $('#loading').hide();

            form.fileupload({
                url: form.attr('action'),
                type: form.attr('method'),
                datatype: 'xml',

                autoUpload: true,
                add: function (event, data) {
                    window.onbeforeunload = function () {
                        return "Your file hasn't completed uploading yet.";
                    };

                    filename = data.files[0].name;
                    file = data.files[0];

                    var date = new Date();
                    var timestamp = date.getTime();
                    filename = filename.replace(/[^a-zA-Z0-9.\-\_]+/g, '').toLowerCase();
                    filekey = timestamp + "/" + filename;

                    form.find('input[name="Content-Disposition"]').val("attachment; filename="+filename);
                    form.find('input[name="key"]').val(filekey);
                    // Actually submit to form to S3.
                    data.submit();
                    var bar = $('<div class="progress" data-mod="' + file.size + '"><div class="bar"></div></div>');
                    $('.progress-bar-area').append(bar);
                    bar.slideDown('fast');
                },
                progress: function (e, data) {
                    var percent = Math.round((data.loaded / data.total) * 100);
                    $('.progress[data-mod="' + data.files[0].size + '"] .bar').css('width', percent + '%').html(percent + '%');
                },
                fail: function (e, data) {
                    window.onbeforeunload = null;
                    $('.progress[data-mod="' + data.files[0].size + '"] .bar').css('width', '100%').addClass('red').html('');
                },
                done: function (event, data) {
                    window.onbeforeunload = null;

                    $('.upload-corral').fadeOut();
                    $('#asset_location').val("{{bucketname}}" + "/" + filekey);

                    var parentForm = $('#asset_location').closest('form');
                    if (parentForm.hasClass('autosubmit')) {
                        parentForm.submit();
                    }

                }
            });
        });
    </script>
{{/s3_key}}
{{^s3_key}}
    {{copy_choose_connection}}
{{/s3_key}}
